<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液退回血站删除</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../../../img/favicon.ico">
    <link rel="stylesheet" href="../../../../element-theme/blue/index.css">
    <style type="text/css">
        .tableLimit tr td .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; /*可以显示的行数，超出部分用...表示 */
            -webkit-box-orient: vertical;
        }

        .el-form-item {
            margin: 20px 20px 0 0;
        }
    </style>
</head>
<body>

<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true" style="padding:5px 20px 20px 20px;">
            <el-form-item label="血液ID">
                <el-input placeholder="请输入血液ID" v-model="pagination.bloodId"></el-input>
            </el-form-item>
            <el-form-item label="退血单号">
                <el-input placeholder="请输入退血单号" v-model="pagination.backInformationNumber"></el-input>
            </el-form-item>
            <el-form-item label="退血原因">
                <el-input placeholder="请输入退血原因" v-model="pagination.backBloodReason"></el-input>
            </el-form-item>
            <el-form-item label="申请人工号">
                <el-input placeholder="请输入申请人工号" v-model="pagination.applicantNumber"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
                <el-date-picker v-model="pagination.applyTime" size="small" format="yyyy-MM-dd"
                                placeholder="请输入申请时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-input placeholder="请输入状态" v-model="pagination.state"></el-input>
            </el-form-item>
            <el-form-item label="审核时间">
                <el-date-picker v-model="pagination.auditTime" size="small" format="yyyy-MM-dd"
                                placeholder="请输入审核时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="审核人工号">
                <el-input placeholder="请输入审核人工号" v-model="pagination.auditorNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="reset">清空</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="batchDownload()">批量下载</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="batchDelete()">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="selectTable" :data="dataList" style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  class="tableLimit" @row-click="handle" :cell-style="{'text-align':'center'}">
            <el-table-column type="selection"></el-table-column>
            <el-table-column fixed="left" prop="id" label="ID">
                <template slot-scope="scope">
                    <el-button type="text" @click="showData">{{scope.row.id}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="backInformationNumber" label="退血单号"></el-table-column>
            <el-table-column prop="backBloodReason" label="退血原因">
                <template slot-scope="scope">
                    {{getBackBloodReasonName(scope.row.backBloodReason)}}
                </template>
            </el-table-column>
            <el-table-column prop="applicantName" label="申请人姓名"></el-table-column>
            <el-table-column prop="applicantNumber" label="申请人工号"></el-table-column>
            <el-table-column prop="applyTime" label="申请时间"></el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    {{getStateName(scope.row.state)}}
                </template>
            </el-table-column>
            <el-table-column prop="auditor" label="审核人姓名"></el-table-column>
            <el-table-column prop="auditTime" label="审核时间"></el-table-column>
            <el-table-column prop="auditorNumber" label="审核人工号"></el-table-column>
            <el-table-column prop="bloodId" label="血液ID"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" @click="del">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[2,4,6,8,10]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>

        <el-dialog title="血站退回血站删除信息" center :visible.sync="sData" width="90%" :close-on-click-modal="false">
            <template>
                <el-descriptions class="margin-top" :column="3" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            创建时间
                        </template>
                        {{shData.sGmtCreate}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            修改时间
                        </template>
                        {{shData.sGmtModified}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            血液ID
                        </template>
                        {{shData.sBloodId}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            退血单号
                        </template>
                        {{shData.sBackInformationNumber}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            退血原因
                        </template>
                        {{getBackBloodReasonName(shData.sBackBloodReason)}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            申请人姓名
                        </template>
                        {{shData.sApplicantName}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            申请人工号
                        </template>
                        {{shData.sApplicantWorkNumber}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            申请时间
                        </template>
                        {{shData.sApplyTime}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            状态
                        </template>
                        {{getStateName(shData.sState)}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            审核人姓名
                        </template>
                        {{shData.sAuditor}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            审核时间
                        </template>
                        {{shData.sAuditTime}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            审核人工号
                        </template>
                        {{shData.sAuditorNumber}}
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-dialog>

    </template>
</div>

<script src="../../../../plugins/vue-2.6.11/vue.js"></script>
<script src="../../../../plugins/axios-0.27.2/axios.min.js"></script>
<script src="../../../../icons/iconfont.js"></script>
<script src="/js/2.15.12/index.js"></script>
<link href="/css/2.15.12/index.min.css" rel="stylesheet">
<script src="/js/httpVueLoader.js"></script>
<script src="/js/jquery.min.js"></script>
<script>Vue.prototype.$ELEMENT = {size: 'medium'};</script>
<script>(
    function () {
        new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    //表格信息
                    tableData: [],
                    backNumber: undefined,
                    backBloodNumber: undefined,
                    user: {
                        "accountNonExpired": true,
                        "accountNonLocked": true,
                        "credentialsNonExpired": true,
                        "enable": false,
                        "enabled": false,
                        "jobnum": "",
                        "menuUrls": {
                            "menu": [{
                                "urls": [{
                                    "id": "11",
                                    "title": "11",
                                    "url": "/pages/error/403.html",
                                    "titleflag": "error"
                                }], "title": "testerror", "titleflag": "error"
                            }, {
                                "urls": [{
                                    "id": "22",
                                    "title": "5-5",
                                    "url": "/pages/error/505.html",
                                    "titleflag": "testerror"
                                }], "title": "testerror2", "titleflag": "testerror"
                            }]
                        },
                        "noLocked": false,
                        "personalization": {
                            "asideFold": false,
                            "mainTabsHeaderFixed": true,
                            "asideControlOpen": false,
                            "headerSkin": "colorful",
                            "headerFixed": false,
                            "skin": "brown",
                            "asideSkin": "dark",
                            "asideControlFixed": true
                        },
                        "username": ""
                    },
                    backReasonList: [],
                    //血液状态列表
                    stateList: [],
                    sData: false,
                    shData: {
                        sGmtCreate: "",
                        sGmtModified: "",
                        sBloodId: "",
                        sBackInformationNumber: "",
                        sBackBloodReason: "",
                        sApplicantName: "",
                        sApplicantWorkNumber: "",
                        sApplyTime: "",
                        sState: "",
                        sAuditor: "",
                        sAuditTime: "",
                        sAuditorNumber: "",
                    },
                    //分页相关信息
                    pagination: {
                        currentPage: 1, //当前页码
                        pageSize: 4, //每页显示记录数
                        total: 0, //总记录数
                        // 需要根据查询的条件
                        bloodId: "",
                        backInformationNumber: "",
                        applicantNumber: "",
                        applyTime: "",
                        state: "",
                        auditTime: "",
                        auditorNumber: "",
                    },
                    dataList: [],
                    size:"",
                }
            },
            //自动触发写入的函数
            created() {
                this.getData();
            },
            mounted() {
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                this.getBackBloodReason();
                this.getState();
            },
            methods: {
                getData() {
                    const url = "/bloodcanclestation/normal/information/" + this.pagination.currentPage + '/' + this.pagination.pageSize;
                    axios.get(
                        url,
                        {
                            params: {
                                bloodId: this.pagination.bloodId,
                                backInformationNumber: this.pagination.backInformationNumber,
                                applicantNumber: this.pagination.applicantNumber,
                                applyTime: this.pagination.applyTime,
                                state: this.pagination.state,
                                auditTime: this.pagination.auditTime,
                                auditorNumber: this.pagination.auditorNumber,
                            }
                        }
                    ).then(res => {
                            if (res.data.code === "200") {
                                console.log(res.data);
                                this.pagination.pageSize = res.data.data.size;
                                this.pagination.currentPage = res.data.data.current;
                                this.pagination.total = res.data.data.total;
                                this.dataList = res.data.data.records;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        }
                    )
                },
                // 批量下载
                batchDownload() {
                    if (JSON.parse(JSON.stringify(this.$refs.selectTable.selection)).length == 0) {
                        this.$notify({
                            title: '温馨提示：',
                            message: '您未选中数据，请重新操作！！！',
                            type: 'warning'
                        });
                        return;
                    }
                    let checkArr = JSON.parse(JSON.stringify(this.$refs.selectTable.selection));  // 存储了勾选到的数据
                    var ids = new Array()
                    for (var i = 0; i < checkArr.length; i++) {
                        ids[i] = checkArr[i].id;
                    }
                    // 批量下载
                    this.$confirm('确定下载这些数据吗, 是否继续?', '批量打印', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const a = document.createElement('a')
                        a.href = '/bloodcanclestation/normal/batchdownloadsba?' + 'ids=' + ids
                        a.click()
                    });
                },
                // 分页查询 每页显示多少条数据
                handleSizeChange: function (pageSize) {
                    this.pagination.pageSize = pageSize;
                    this.getData()
                },

                //分页查询 切换页码
                handleCurrentChange: function (currentPage) {
                    this.pagination.currentPage = currentPage;
                    //执行查询
                    this.getData()
                },
                // 获取状态字典
                getState() {
                    axios.get('/state/normal/getName')
                        .then((res) => {
                            if (res.data.code === '200') {
                                this.stateList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败'
                                })
                            }
                        })
                },
                // 将表格中的State字段的code转换成name
                getStateName(code) {
                    for (let i = 0; i < this.stateList.length; i++) {
                        if (this.stateList[i].code === code) {
                            return this.stateList[i].state;
                        }
                    }
                },
                // 获取退血原因字典
                getBackBloodReason() {
                    axios.get('/backbloodreason/normal/query')
                        .then((res) => {
                            if (res.data.code === '200') {
                                this.backReasonList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败'
                                })
                            }
                        })
                },
                // 将表格中的BackBloodReason字段的code转换成name
                getBackBloodReasonName(code) {
                    for (let i = 0; i < this.backReasonList.length; i++) {
                        if (this.backReasonList[i].code === code) {
                            return this.backReasonList[i].reason;
                        }
                    }
                },
                handle(row) {
                    this.backNumber = row["backInformationNumber"];
                    this.backBloodNumber = row["bloodId"];
                    this.shData.sGmtCreate = row["gmtCreate"];
                    this.shData.sGmtModified = row["gmtModified"];
                    this.shData.sBloodId = row["bloodId"];
                    this.shData.sBackInformationNumber = row["backInformationNumber"];
                    this.shData.sBackBloodReason = row["backBloodReason"];
                    this.shData.sApplicantName = row["applicantName"];
                    this.shData.sApplicantWorkNumber = row["applicantNumber"];
                    this.shData.sApplyTime = row["applyTime"];
                    this.shData.sState = row["state"];
                    this.shData.sAuditor = row["auditor"];
                    this.shData.sAuditTime = row["auditTime"];
                    this.shData.sAuditorNumber = row["auditorNumber"];
                },
                showData() {
                    this.sData = true;
                },
                //批量删除
                batchDelete() {
                    if(JSON.parse(JSON.stringify(this.$refs.selectTable.selection)).length==0){
                        this.$notify({
                            title: '温馨提示：',
                            message: '您未选中数据，请重新操作！！！',
                            type: 'warning'
                        });
                        return;
                    }
                    let checkArr = JSON.parse(JSON.stringify(this.$refs.selectTable.selection));  // 存储了勾选到的数据
                    var ids=new Array()
                    for(var i=0;i<checkArr.length;i++){
                        ids[i]=checkArr[i].id;
                    }
                    console.log("打印所选编号")
                    console.log(ids)
                    //批量删除
                    this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            url: '/bloodcanclestation/normal/batchDelete',
                            method: 'put',
                            dataType: 'json',
                            data:ids
                        }).then(res => {
                            if (res.data.code === '200') {
                                this.handleCurrentChange(this.pagination.currentPage);
                                this.$notify({
                                    tile: '温馨提示',
                                    message: '批量删除成功！！！',
                                    type: 'success'
                                })
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '删除出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '删除失败',
                            })
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                del() {
                    this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const params = {};
                        params.backInformationNumber = this.backNumber;
                        params.bloodId = this.backBloodNumber;
                        axios({
                            method: "delete",
                            url: "/bloodcanclestation/normal/delete",
                            data: params,
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8'
                            }
                        }).then(res => {
                            console.log(res.data);
                            if (res.data.code === "200") {
                                this.getData();
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    })
                },
                reset() {
                    this.pagination.bloodId = "";
                    this.pagination.backInformationNumber = "";
                    this.pagination.applicantNumber = "";
                    this.pagination.applyTime = "";
                    this.pagination.state = "";
                    this.pagination.auditTime = "";
                    this.pagination.auditorNumber = "";
                    this.dataList = undefined;
                    this.getData();
                },
            }
        });
    })()
</script>

</body>
</html>